<template>
    <dv-border-box11 ref="dvBox" title=" 入舍人员" :title-width="400" :animate="false" style="width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;">
        <div style="flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;">
            <img :src="data.photo || photo1" alt="photo2" style="max-height:50%;max-width:80%;object-fit:contain;" />
            <div class="info" style="margin-top:2vh;text-align:center;">
                <span style="display:block;">姓名:{{data.name}}</span>
                <span style="display:block;">宿舍:{{data.dorm}}</span>
                <span style="display:block;">专业:{{data.major}}</span>
                    </div>
        </div>
    </dv-border-box11>
</template>
<script setup>
import { ref, onMounted, nextTick, inject, computed } from 'vue';
import photo1 from '@/assets/photo1.png';
const wsState = inject('wsState');
const data = computed(() => wsState.card2);
const dvBox = ref();
onMounted(() => {
    setTimeout(() => {
        if (dvBox.value) {
            nextTick(() => {
                dvBox.value.initWH();
            })
        }
    })
})
</script>
<style lang="scss" scoped>
.go_out {
    display: flex;
    /* 使用 Flex 布局实现垂直布局 */
    flex-direction: column;
    /* 设置主轴方向为列 */
    justify-content: center;
    /* 主轴上的对齐方式，这里用于垂直居中 */
    align-items: center;
    /* 交叉轴上的对齐方式，这里用于水平居中 */
    height: 30vh;
    /* 确保容器占据全部高度以实现居中 */
}

.photo1 {
    display: flex;
    /* 使用 Flex 布局来居中图片 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 根据需要调整宽度 */
    padding-top: 3vh;
    margin: 0;
}

.photo1 img {
    max-width: 100%;
    max-height: 20vh;
    height: auto;
    /* 保持图片宽高比 */
}

.info {
    margin: 0;
    display: flex;
    flex-direction: column;
    padding-top: 1vh;
}
</style>